<template>
  <div>
    <svg id="markmapall" ref="markmapall" :style="{width: contentwidth==='full'?'100%':'300px',height:computeheight}"></svg>
  </div>
</template>

<script>
import { Transformer } from 'markmap-lib';
import { Markmap } from 'markmap-view';

export default {
  name: 'MarkdownRenderer',
  props: {
    content: {
      type: String,
      required: true,
    },
   contentwidth:{
         type: String,
         default:""
   }
  },
  computed: {
    computeheight() {
      const clientHeight = document.documentElement.clientHeight-120;
 
      let height = this.contentwidth==='full'?clientHeight+"px":'300px'
      return height;
    },
  },
  data(){
    return {
     Markmapdata: null
    } 
  },
  mounted() {
    //  this.renderMarkmap(this.content);
  },
  watch: {
    content(val,old) {
  
      this.$nextTick(this.renderMarkmap(val));
    },
  },
  methods: {
    renderMarkmap(val) {
          // console.log(val, "val:::::",this.Markmapdata)
      // if (!val) return;
      const transformer = new Transformer();
      const { root } = transformer.transform(val);
      if(!this.Markmapdata) {
        this.Markmapdata = Markmap.create(this.$refs.markmapall,null, root)
      } else {
        console.log(this.Markmapdata.setData)
        this.Markmapdata.setData(root)
        // this.Markmapdata = root
      }
   
    },
  },
};
</script>